import { request } from '../../request/index.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    //右侧滚动距离顶部的距离
    scrollTop: 0,
    //被选中的菜单
    currentIndex: 0,
  },
  // 接口的返回数据
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1.先判断一下 本地存储中 有没有旧数据
    // 2.没有旧数据 直接发送请求
    // 3. 如果有旧数据同时没有过期。就可以使用本地存储中的旧数据即可

    let cates = wx.getStorageSync("cates");

    if (!cates) {
      // 如果不存在缓存值
      this.getCategory();
      console.log("不存在")
    }
    else {
      // 如果存在缓存值，在判断有没有过期  这里我们设置为10秒
      // 用当前时间 减去 缓存的时间  如果大于10秒证明超时
      if (Date.now() - cates.time > 1000 * 10) {
        // 过期了
        this.getCategory();
        console.log("过期了")
      }
      else {
        // 没有过期
        this.Cates = cates.data;
        // 构造左侧的数据 只要列表名称
        let leftMenuList = this.Cates.map(v => v.cat_name);
        // 构造右侧的列表数据 
        let rightContent = this.Cates[0].children;

        // 赋值
        this.setData({
          leftMenuList,
          rightContent
        })
        console.log("没有过期")
      }
    }

  },
  getCategory() {

    request({ url: "/categories" })
      .then(res => {
        this.Cates = res.data.message;
        //需要把他存入到 本地存储中，在小程序中 存入什么类型 获取时 就是什么类型，不像web中的缓存 一样需要先toString转成字符串
        // wx.setStorageSync(key, data);  这个data是一个对象里面可以有n个属性
        wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });

        // 构造左侧的数据 只要列表名称
        let leftMenuList = this.Cates.map(v => v.cat_name);
        // 构造右侧的列表数据 
        let rightContent = this.Cates[0].children;

        // 赋值
        this.setData({
          leftMenuList,
          rightContent
        })


      })
      .catch(error => {
        console.log(error)
      })
  },
  // 选择导航
  seletorNav(e) {
    let i = e.currentTarget.dataset.indexs;
    this.setData({
      rightContent: this.Cates[i].children,
      scrollTop: 0,
      currentIndex: i
    })
  }

})